<template>
	<view class="container">
		<view class="header-status"></view>
		<view class="headers">
			<view class="header-title" @click="cliBack">
				<cmd-icon type="chevron-left" class="chevron-right" color="#FFFFFF"></cmd-icon>
				<text class="header-titles">我的钱包</text>
				<text></text>
			</view>
			<view class="header-note">
				<cmd-icon type="alert-circle" class="chevron-right" color="#FFBC1B"></cmd-icon>
				<text class="header-titles">每月15号可提现上月结算的返现</text>
			</view>
			<view class="header-money">
				<text class="header-titles">￥1000.00</text>
				<view>立即提现</view>
			</view>
			<view class="money-balance">余额</view>
			<view class="header-amount">
				<view class="header-amount-left">
					<text class="header-amounts">￥100.00</text>
					<text class="header-amount-title">待入账 (元)</text>
				</view>
				<view class="header-amount-right">
					<text class="header-amounts">￥100.00</text>
					<text class="header-amount-title">累计提现 (元)</text>
				</view>
				<view></view>
			</view>
		</view>
		<view class="logs">
			<view class="logs-top">
				<view class="logs-left">
					<image src="../../static/logo.png"></image>
					<text>返现记录</text>
				</view>
				<view class="logs-right">
					<image src="../../static/logo.png"></image>
					<text>提现记录</text>
				</view>
			</view>
			<view class="logs-bottom">
				<text>节省记录</text>
				<cmd-icon type="chevron-right" class="chevron-right" color="#999999"></cmd-icon>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods:{
			cliBack(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #999999;
	}

	.header-status {
		height: var(--status-bar-height);
	}

	.headers {
		height: 610rpx;
		background-color: #FD584E;
		display: flex;
		flex-direction: column;
	}

	.header-title {
		height: 95rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

	}

	.header-title .chevron-right {
		font-size: 36rpx !important;
		margin-left: 30rpx;
	}

	.header-titles {
		color: #FFFFFF;
		font-size: 36rpx;
		margin-right: 30rpx;
	}

	.header-note {
		height: 60rpx;
		background-color: #FEE3E3;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

	}

	.header-note .chevron-right {
		font-size: 24rpx !important;
		margin-left: 30rpx;
	}

	.header-note text {
		color: #E6574D;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.header-money {
		height: 75rpx;
		margin-top: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.header-money text {
		color: #FFFFFF;
		font-size: 100rpx;
		font-weight: 800;
	}
	.header-money view{
		width:160rpx;
		height:60rpx;
		border-radius:30rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
		color: #FF3536;
		line-height: 60rpx;
		text-align: center;
		margin-right: 30rpx;
	}
	
	.money-balance{
		margin-top: 20rpx;
		margin-left: 30rpx;
		color: #FEC5C5;
		font-size: 28rpx;
	}
	
	.header-amount{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 60rpx;
	}
	.header-amount-left{
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
	}
	.header-amount-right{
		display: flex;
		flex-direction: column;	
		margin-right: 30rpx;
	}
	.header-amounts{
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.header-amount-title{
		color: #FFC6C6;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	.logs{
		position: absolute;
		left: 30rpx;
		top: 584rpx;
	}
	.logs-top{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 690rpx;
		height:160rpx;
		background-color: #FFFFFF;
		border-radius:12rpx;
	}
	.logs-left{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.logs-top image{
		width: 60rpx;
		height: 60rpx;
	}
	.logs-top text{
		font-size:32rpx;
		color:#1C1C1C;
		margin-left: 30rpx;
	}
	.logs-right{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.logs-bottom{
		height:100rpx;
		border-radius: 12rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.logs-bottom text{
		font-size: 32rpx;
		color: #1C1C1C;
		margin-left: 45rpx;
	}
	.logs-bottom .chevron-right{
		font-size: 24rpx !important;
		margin-right: 30rpx;
	}
</style>
